<template>
  <div class="tab-title-page audit_supplier">
    <div class="common_form_search">
      <el-form
        ref="searchForm"
        :inline="true"
        :model="searchForm"
      >
        <el-form-item label="店铺名称">
          <el-input
            v-model="searchForm.shopname"
            placeholder="请输入店铺名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="账号">
          <el-input
            v-model="searchForm.account_num"
            placeholder="请输入账号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="申请时间">
          <my-date-picker ref="myDatePicker"></my-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            type="primary"
            @click="search()"
          >查询</el-button>
          <el-button
            size="small"
            @click="reset()"
          >重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-tabs
      class="flex-1 nav_tabs"
      v-model="activeName"
      @tab-click="handleClick"
    >
      <el-tab-pane
        :label="`全部(${count.status_total})`"
        name="all"
      ></el-tab-pane>
      <el-tab-pane
        :label="`待审核(${count.notcheck_status_total})`"
        name="2"
      ></el-tab-pane>
      <el-tab-pane
        :label="`已审核(${count.istcheck_status_total})`"
        name="1"
      ></el-tab-pane>
    </el-tabs>
    <el-divider class="middle_divider"></el-divider>
    <div class="child_page">
      <div class="flex align-center table-top-btns">
        <h5 class="flex align-center">
          <svg-icon
            style="margin-right:15px"
            icon-class="list"
            :size="15"
          />数据列表
        </h5>
      </div>
      <el-table
        :data="tableData"
        border
        v-show="tableData.length > -1"
      >
        <el-table-column
          align="center"
          prop="id"
          label="ID"
          width="70"
        />
        <el-table-column
          align="center"
          prop="shopname"
          label="店铺名称"
        />
        <el-table-column
          align="center"
          prop="account_num"
          label="账号"
        />
        <el-table-column
          align="center"
          label="店铺头像"
        >
          <template slot-scope="scope">
            <el-image
              style="width:50px;height:50px"
              fit="fill"
              :src="$globalObj.imgBaseUrl+scope.row.photo"
            >
              <div
                slot="error"
                class="image-slot"
              >
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="people"
          label="联系人姓名"
        />
        <el-table-column
          align="center"
          prop="contact_tel"
          width="120"
          label="联系人手机号"
        />
        <el-table-column
          align="center"
          prop="name"
          label="经营项目"
        />
        <el-table-column
          align="center"
          label="发票类型"
        >
          <template slot-scope="scope">
            <span>{{scope.row.faptype==1?'普通发票':scope.row.faptype==2?'增值税发票':'普通发票+增值税发票'}}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column
          align="center"
          prop="faptype_name"
          label="推荐人"
        />
        <el-table-column
          align="center"
          prop="faptype_name"
          label="实付金额"
        />
        <el-table-column
          align="center"
          prop="faptype_name"
          label="合同归档"
        /> -->
        <el-table-column
          align="center"
          prop="status"
          label="审核状态"
        >
          <template slot-scope="scope">
            <el-tag :type="scope.row.status == 1 ? 'success' : 'warning'">{{ scope.row.status == 1 ? "已审核" : "待审核" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="addtime"
          label="申请时间"
          width="100"
        />
        <el-table-column
          fixed="right"
          align="center"
          label="操作"
          width="240"
        >
          <template slot-scope="scope">
            <el-button
              v-if="$hasMethod('#pass') && scope.row.status == 2"
              type="primary"
              size="mini"
              @click="pass(scope.row.id)"
            >通过</el-button>
            <el-button
              v-if="$hasMethod('#delete')"
              type="danger"
              size="mini"
              @click="removeItem(scope.row.id)"
            >删除</el-button>
            <el-dropdown
              v-if="$hasMethod('#edit')||$hasMethod('#view')"
              @command="command=>handleMore(command,scope.row)"
            >
              <span
                class="el-dropdown-link blue-font pointer"
                style="margin-left:10px"
              >
                更多操作<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-if="$hasMethod('#view')"
                  command="view"
                >查看资料</el-dropdown-item>
                <el-dropdown-item
                  v-if="$hasMethod('#edit')&&scope.row.status==2"
                  command="edit"
                >编辑资料</el-dropdown-item>
                <el-dropdown-item
                  v-if="$hasMethod('#setWithdraw')"
                  command="setWithdraw"
                >设置提现</el-dropdown-item>
                <el-dropdown-item
                  v-if="$hasMethod('#onlinePay')"
                  command="onlinePay"
                >线上支付</el-dropdown-item>
                <el-dropdown-item
                  v-if="$hasMethod('#offlinePay')"
                  command="offlinePay"
                >线下支付</el-dropdown-item>
                <el-dropdown-item
                  v-if="$hasMethod('#contract')"
                  command="edit"
                >发起合同</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <custom-page
        ref="customPage"
        :total="total"
        @getList="getList"
      ></custom-page>
    </div>
  </div>
</template>

<script>
import { supplierCheckList, editShopUserStatus, delShopUser } from "@/api/audit";
import customPage from "@/components/customPage";
import myDatePicker from "@/components/myDatePicker";
export default {
  components: { customPage, myDatePicker },
  data() {
    return {
      activeName: 'all',
      searchForm: {
        shopname: '',
        account_num: '',
        addtime: ''
      },
      tableData: [],
      total: 0,
      count: {
        status_total: 0,
        notcheck_status_total: 0,
        istcheck_status_total: 0
      }
    }
  },
  methods: {
    pass(id) {
      // 通过
      this.$confirm('您确定要通过审核吗？', '通过', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        editShopUserStatus(id).then(res => {
          this.getList(true);
        });
      }).catch(() => { });
    },
    // 删除
    removeItem(id) {
      this.$confirm('您确定要删除吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        delShopUser(id).then(res => {
          this.getList(true);
        });
      }).catch(() => { });
    },
    handleClick(tab) {
      this.activeName = tab.name;
      this.$refs.customPage.page = 1;
      this.getList();
    },
    // 获取数据
    getList(flag) {
      const { page, pageSize } = this.$refs.customPage;
      if (!flag) {
        this.tableData = [];
      }
      supplierCheckList({
        page,
        pageSize,
        ...this.searchForm,
        status: this.activeName == 'all' ? '' : this.activeName
      }).then(res => {
        this.tableData = res.data || [];
        this.total = res.total || 0;
        this.count = res.count || {};
      })
    },
    // 查询
    search() {
      const pickerVal = this.$refs.myDatePicker.getVal();
      if (pickerVal !== 'error') {
        this.searchForm.addtime = pickerVal;
        this.$refs.customPage.page = 1;
        this.getList();
      }
    },
    // 重置
    reset() {
      if (this.$refs.myDatePicker) {
        this.$refs.myDatePicker.reset();
      }
      this.searchForm = {
        shopname: '',
        account_num: '',
        addtime: ''
      };
      this.getList();
    },
    handleMore(command, item) {
      // console.log(command, item);
      // this.selectedItem = item;
      if (command == 'edit') {
        // 编辑资料
        this.$router.push({ name: 'auditSupplierView', params: { viewId: item.id, toEdit: true } });
      } else if (command == 'view') {
        // 查看资料
        this.$router.push({ name: 'auditSupplierView', params: { viewId: item.id } });
      }
    },
  },
  mounted() {
    this.getList();
  },
  beforeRouteEnter(to, from, next) {
    if (from.name === "auditSupplierView") {
      next(vm => {
        vm.getList();
      })
    } else {
      next();
    }
  }
}
</script>

<style lang="scss" scoped>
.common_form_search {
  padding: 15px 30px 0;
  background-color: #ffffff;
  border-bottom: 1px solid #eeeeee;
}
.child_page {
  padding: 30px 30px 15px 30px;
}
</style>
